<template>
  <div class="son">
    {{ title }}
    <span>姓名： {{ name }}</span
    >&nbsp;&nbsp;&nbsp;&nbsp;
    <span>年龄： {{ age }}</span>
    <button @click="sonSay">$emit('sonSay')</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  emits: ["sonSay"],
  props: {
    title: String,
    son: Object,
  },
  setup(props, { emit }) {
    const son = reactive(props.son);
    const title = reactive(props.title);
    function sonSay() {
      console.log("fdassf");
      emit("sonSay");
    }

    return {
      ...toRefs(son),
      title,
      sonSay,
    };
  },
};
</script>

<style>
.son {
  height: 60px;
  line-height: 60px;
  background-color: skyblue;
}
</style>
